<?php
/** @var AjaxController $this */
/** @var File $model */
$dimensions = $model->getDimensions();
if (empty($dimensions)) {
	throw new CException('图片长宽不正确，请重新上传');
} else {
	$width = $dimensions['width'];
	$height = $dimensions['height'];
}

$sizer = $this->imageGetPreviewRatio($width, $height);
$sizes = $model->getSizes();
if (isset($sizes[File::IMAGE_THUMBNAIL])) {
	$thumbW = $sizes[File::IMAGE_THUMBNAIL]['width'];
	$thumbH = $sizes[File::IMAGE_THUMBNAIL]['height'];
} elseif (isset($sizes[File::IMAGE_ORIGIN])) {
	$thumbW = $sizes[File::IMAGE_ORIGIN]['width'];
	$thumbH = $sizes[File::IMAGE_ORIGIN]['height'];
} else {
	$thumbW = 160;
	$thumbH = 120;
}
list($thumbW, $thumbH) = Yii::app()->getImage()->constrainDimensions($thumbW, $thumbH, 160, 120);
$id = $model->id;

$backupSizes = isset($model->meta['_backup_sizes']) ? $model->meta['_backup_sizes'] : false;
$canRestore = false;
if ( ! empty( $backupSizes ) && isset( $backupSizes[File::IMAGE_ORIGIN . '-orig'], $model->uri) ){
	$canRestore = $backupSizes[File::IMAGE_ORIGIN . '-orig']['uri'] != $model->uri;
}
$note = '';
if ( isset($result) ) {
	if ( isset($result['error']) )
		$note = "<div class='alert alert-error'>{$result['error']}</div>";
	elseif ( isset($result['msg']) )
		$note = "<div class='alert alert-success'>{$result['msg']}</div>";
}
?>
<div class="imgedit-wrap">
	<div id="imgedit-panel-<?php echo $id; ?>">
		<div class="imgedit-settings">
			<div class="imgedit-group">
				<div class="imgedit-group-top">
					<h3>
						拉伸图像 <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a>
					</h3>
					<div class="imgedit-help">
						<p>您可以成比例地拉伸原始图片，在诸如裁切、旋转的编辑操作之前，最好先伸缩调整好您的图片尺寸。图片仅能被缩小，不能被放大。</p>
					</div>
					<p>原始尺寸<?php echo $width; ?> &times; <?php echo $height; ?></p>

					<div class="imgedit-submit">
						<span class="nowrap">
							<input type="text" id="imgedit-scale-width-<?php echo $id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $id; ?>, 1)" style="width:4em;" value="<?php echo $width; ?>"/> &times;
							<input type="text" id="imgedit-scale-height-<?php echo $id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $id; ?>, 0)" style="width:4em;" value="<?php echo $height; ?>"/>
							<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $id; ?>">!</span>
						</span>
						<input type="button" onclick="imageEdit.action(<?php echo $id; ?>, '2862ecdbf5', 'scale')" class="btn btn-primary" value="拉伸"/>
					</div>
				</div>
			</div>
<?php if ($canRestore) {?>
			<div class="imgedit-group">
				<div class="imgedit-group-top">
					<h3><a href="#" onclick="imageEdit.toggleHelp(this);return false;">还原原始图像 <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
					<div class="imgedit-help">
						<p>放弃所有变更，并恢复到原始图片。 先前编辑过的图片副本不会被删除。</p>
						<div class="imgedit-submit">
							<input type="button" value="还原图像" class="btn btn-primary" onclick="imageEdit.action(<?php echo $id; ?>, 'eb65c514e4', 'restore')">
						</div>
					</div>
				</div>
			</div>
<?php } ?>
			<div class="imgedit-group">
				<div class="imgedit-group-top">
					<h3>图像裁切
						<a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a>
					</h3>

					<div class="imgedit-help">
						<p>要裁切此图像，点击并拖动来确认您的选择。</p>

						<p><strong>按比例裁切</strong><br/>
							纵横比是宽与高之间的比值。您可以通过在修改选区时按住Shift键来固定纵横比。使用输入框来指定纵横比，如1:1（方形）、4:3、16:9等。</p>

						<p><strong>裁切选区</strong><br/>
							您做出选择后，选区大小可以通过输入像素值值来调整。最小值为媒体设置中指定的缩略图大小。</p>
					</div>
				</div>

				<p> 长宽比：
					<span class="nowrap">
						<input type="text" id="imgedit-crop-width-<?php echo $id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $id; ?>, 0, this)" style="width:3em;"/>
						:
						<input type="text" id="imgedit-crop-height-<?php echo $id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $id; ?>, 1, this)" style="width:3em;"/>
					</span>
				</p>

				<p id="imgedit-crop-sel-<?php echo $id; ?>"> 选区：
					<span class="nowrap">
						<input type="text" id="imgedit-sel-width-<?php echo $id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $id; ?>)" style="width:4em;"/>
						&times;
						<input type="text" id="imgedit-sel-height-<?php echo $id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $id; ?>)" style="width:4em;"/>
					</span>
				</p>
			</div>


			<div class="imgedit-group imgedit-applyto">
				<div class="imgedit-group-top">
					<h3>缩略图设置
						<a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a>
					</h3>

					<p class="imgedit-help">您可以编辑图像，并无需影响缩略图。比如，您可能希望有一张只展示图像一部分的方形缩略图。</p>
				</div>

				<p>
					<img src="<?php echo $model->getImageUrl(File::IMAGE_THUMBNAIL); ?>" width="<?php echo $thumbW; ?>"
						 height="<?php echo $thumbH; ?>" class="imgedit-size-preview" alt="<?php echo $model->getAlt(); ?>" draggable="false"/>
					<br/>当前缩略图 </p>

				<p id="imgedit-save-target-<?php echo $id; ?>">
					<strong>将更改应用于：</strong><br/>

					<label class="imgedit-label">
						<input type="radio" name="imgedit-target-<?php echo $id; ?>" value="all" checked="checked"/>
						所有图像大小
					</label>

					<label class="imgedit-label">
						<input type="radio" name="imgedit-target-<?php echo $id; ?>" value="thumbnail"/>
						缩略图
					</label>

					<label class="imgedit-label">
						<input type="radio" name="imgedit-target-<?php echo $id; ?>" value="nothumb"/>
						除缩略图外所有尺寸
					</label>
				</p>
			</div>


		</div>

		<div class="imgedit-panel-content">
			<?php echo $note; ?>
			<div class="imgedit-menu clearfix">
				<div onclick="imageEdit.crop(<?php echo $id; ?>, '2862ecdbf5', this)" class="imgedit-crop disabled" title="裁切"></div>
				<div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo $id; ?>, '2862ecdbf5', this)" title="逆时针旋转"></div>
				<div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo $id; ?>, '2862ecdbf5', this)" title="顺时针旋转"></div>

				<div onclick="imageEdit.flip(1, <?php echo $id; ?>, '2862ecdbf5', this)" class="imgedit-flipv" title="垂直翻转"></div>
				<div onclick="imageEdit.flip(2, <?php echo $id; ?>, '2862ecdbf5', this)" class="imgedit-fliph" title="水平翻转"></div>

				<div id="image-undo-<?php echo $id; ?>" onclick="imageEdit.undo(<?php echo $id; ?>, '2862ecdbf5', this)" class="imgedit-undo disabled" title="撤销"></div>
				<div id="image-redo-<?php echo $id; ?>" onclick="imageEdit.redo(<?php echo $id; ?>, '2862ecdbf5', this)" class="imgedit-redo disabled" title="重做"></div>
			</div>

			<input type="hidden" id="imgedit-sizer-<?php echo $id; ?>" value="<?php echo $sizer; ?>"/>
			<input type="hidden" id="imgedit-minthumb-<?php echo $id; ?>" value="150:150"/>
			<input type="hidden" id="imgedit-history-<?php echo $id; ?>" value=""/>
			<input type="hidden" id="imgedit-undone-<?php echo $id; ?>" value="0"/>
			<input type="hidden" id="imgedit-selection-<?php echo $id; ?>" value=""/>
			<input type="hidden" id="imgedit-x-<?php echo $id; ?>" value="<?php echo $width; ?>"/>
			<input type="hidden" id="imgedit-y-<?php echo $id; ?>" value="<?php echo $height; ?>"/>

			<div id="imgedit-crop-<?php echo $id; ?>" class="imgedit-crop-wrap">
				<img id="image-preview-<?php echo $id; ?>" onload="imageEdit.imgLoaded('<?php echo $id; ?>')" src="<?php echo $this->createUrl('/ajax', array('action'=>'imgedit-preview', 'postid'=>$id, 'rand'=>rand(1, 9999))); ?>">
			</div>

			<div class="imgedit-submit">
				<input type="button" onclick="imageEdit.close(<?php echo $id; ?>, 1)" class="btn" value="取消"/>
				<input type="button" onclick="imageEdit.save(<?php echo $id; ?>, '2862ecdbf5')" disabled="disabled" class="btn btn-primary imgedit-submit-btn" value="保存"/>
			</div>
		</div>

	</div>
	<div class="imgedit-wait" id="imgedit-wait-<?php echo $id; ?>"></div>
	<script type="text/javascript">jQuery(function () {
			imageEdit.init(<?php echo $id; ?>);
		});</script>
	<div class="hidden" id="imgedit-leaving-<?php echo $id; ?>">未保存的更改将丢失。按“确定”以继续，按“取消”可返回“图片编辑器”。</div>
</div>